.mobilenav {
  @include transition($mobilenav-transition);
  position: fixed;
  margin-left: negate($sidenav-width);
  visibility: hidden;

  a {
    // Right padding prevents text from running over arrow
    padding: 12px 35px 12px 20px;
  }

  .subnav {
    @include transition($mobilenav-transition);
    position: fixed;
    top: 0;
    left: 0;
    width: $sidenav-width;
    height: 100%;
    margin-left: negate($sidenav-width);
    overflow: auto;
    padding: 0 5px 10px 0;
    background: $c-body-bg;
  }
}

.mobilenav-accordion {
  > a {
    @extend %nav-icon;

    &:after {
      content: fae-icon(chevron_right);
      right: 18px;
      top: 14px;
      font-size: 11px;
    }
  }

  &.-open {
    > ul {
      margin-left: 0;
      z-index: 1;
    }

    > .subnav {
      padding-right: 0;
    }
  }
}

.mobilenav-subheader {
  margin-bottom: 0;
  display: block;
  padding: 15px 20px;
  cursor: pointer;
  background-color: $c-darker-grey;
  color: $c-white;

  &:before {
    @include icon-stuff;
    content: fae-icon(chevron_left);
    border-radius: 50%;
    padding: 5px 9px 5px 7px;
    border: 2px solid $c-white;
    margin-right: 10px;
    color: $c-white;
  }
}

.mobilenav-toggle {
  display: inline-block;
  vertical-align: middle;
  padding: 14px $content-buffer;
  cursor: pointer;
  color: $c-white;

  @include bp(large) {
    display: none;
  }
}

.mobile-active {
  body,
  .main-header {
    margin-left: $sidenav-width;
  }

  .mobilenav {
    margin-left: 0;
    visibility: visible;
  }

  .mobilenav-toggle {
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
      height: 2000%;
      width: 2000%;
    }
  }
}

.mobilenav-user {
  a {
    @extend %nav-icon;
    background: $c-lightest-grey;

    &:after {
      top: 15px;
      right: 13px;
      font-size: 16px;
    }

    &.-logout {
      &:after {
        content: fae-icon(logout);
      }
    }

    &.-settings {
      &:after {
        content: fae-icon(settings);
      }
    }

    &.-support {
      &:after {
        content: fae-icon(support);
      }
    }

    &.-viewsite {
      &:after {
        content: fae-icon(offlink);
      }
    }
  }
}

.mobilenav-user-header {
  display: block;
  position: relative;
  padding: 15px 10px 15px 20px;
  cursor: pointer;
  color: $c-black;
  background: $c-mid-grey;
}
